import {Layout, Button, Space, Flex, Radio, Input} from 'antd';
import {
    LeftOutlined,
    RightOutlined,
    CheckCircleTwoTone,
    setTwoToneColor,
    getTwoToneColor,
    PoundCircleTwoTone
} from "@ant-design/icons";
import React, {useState, useEffect} from 'react';
import {useNavigate, useParams} from 'react-router-dom';
export default function SuccessThirdPage() {
    const { pay } = useParams();
    const [cost, setCost] = useState(0);

    setTwoToneColor('#FE4E84');
    getTwoToneColor(); // #eb2f96

    // 在 useEffect 中调用 fetchOrderInfo 函数
    useEffect(() => {
        fetchOrderInfo(pay);
    }, []); // 在组件挂载时获取订单信息

    const fetchOrderInfo = async (orderId) => {
        try {
            const orderList = JSON.parse(localStorage.getItem('orderList'));
            const foundOrder = orderList.find(order => order.orderId === Number(orderId));
            if (foundOrder) {
                const orderCost = foundOrder.cost + foundOrder.shipping - foundOrder.discount;
                console.log(orderCost);
                setCost(orderCost)
                // 这里你可以将 orderCost 进行后续处理，比如设置到 state 中
            } else {
                console.log('Order not found with id:', orderId);
            }
        } catch (error) {
            console.error('Error fetching order info:', error);
        }
    };

    const navigate = useNavigate();
    const handleToOrder = () => {
        navigate('/order/detail');
        //其实是oder/:id
        //navigate('/order/:id');
    }

    const handleToSuccess = () => {
        navigate('/order/pay/success/'+pay);
    }

    const handleBack = () => {
        navigate('/order/pay/second/'+pay)
    }

    return (
        <div style={{  margin: 'auto', backgroundColor: '#fff' }}>
        <div className="pay-container" >

            <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center" }}>
                <LeftOutlined onClick={handleBack}/>
                <h2 style={{ textAlign: "center", margin: "0 auto" }}>支付成功</h2>
            </div>


            <div className="success-img" style={{textAlign:"center",marginTop:100}}>
                <PoundCircleTwoTone style={{fontSize:80}} />
                <p style={{color:"#FE4E84"}}>支付成功</p>
                <h1 style={{fontSize:30}}>￥{cost}</h1>
            </div>

            <div className="button-container" style={{ marginTop: 100, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <Button
                    type="primary"
                    style={{
                        marginTop: 20,
                        width: '90%',
                        backgroundColor: 'white',
                        color: 'black', // 设置文字颜色为黑色,
                        borderColor:'black',
                        borderRadius:10,
                        height:40,
                        fontSize:20
                    }}
                    onClick={handleToSuccess}
                >
                    完成
                </Button>
            </div>

        </div>
        </div>
    );
}